<!-- 用户管理 -->
<template>
  <div class="children_content">
    <div class="add_btns_box">
      <div class="box_left">
        <div class="title">MCP服务</div>
      </div>
      <div class="box_right">
        <Space>
          <Button type="primary" @click="handleMCPEdit()">新建服务</Button>
        </Space>
      </div>
    </div>

    <div class="content_table">
      <vxe-table
        ref="tableRef"
        :data="tableData"
        border="none"
        sync-resize
        size="small"
        stripe
        :min-height="500"
        :max-height="screenHeight"
        class="right_table"
      >
        <vxe-column title="MCP服务名" field="name" width="200"> </vxe-column>
        <vxe-column title="关联应用数量" field="mcpBodyList"> </vxe-column>
        <vxe-column title="操作" fixed="right" width="200" align="center">
          <template #default="{ row }">
            <div class="table_btns">
              <text-btn type="custom" @click="showUse = true">开始使用</text-btn>
              <text-btn type="edit" @click="handleMCPEdit(row.id)">编辑</text-btn>
              <text-btn type="del" @click="removeUser(row, rowIndex)"
                >移除</text-btn
              >
            </div>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="page_box">
        <Page
          v-model="pageIndex"
          :page-size="pageSize"
          :total="total"
          show-elevator
          show-total
          @on-change="getMCPList()"
        />
      </div>
    </div>

    <!-- 新增编辑数据 -->
    <edit-dialog
      ref="editRef"
      @cancel="showEdit = false"
      @submit="editSuccess"
    />
    <!-- 开始使用 -->
    <use-dialog v-if="showUse" @cancel="showUse = false"  />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, inject, watch, provide } from 'vue';
import { Message } from 'view-ui-plus';

import { listMCP, deleteMCP } from '@/api/modules/mcp';

import EditDialog from './components/EditDialog.vue';
import UseDialog from './components/UseDialog.vue';

// 屏幕高度
const screenHeight = inject('screenHeight');
// 搜索组件高度
const searchHeight = ref(null);
// 表格高度
const tableHeight = ref(0);
// 监听 screenHeight 的变化
watch(
  screenHeight,
  (newHeight) => {
    tableHeight.value = newHeight - 248;
  },
  { immediate: true }
);

// 是否显示新增
const showEdit = ref(false);
const showUserSelect = ref(false);

// 当前对象
const { proxy } = getCurrentInstance();
// 页码
const pageIndex = ref(1);
const pageSize = 20;
const total = ref(0);
// 表单元素对象
const tableRef = ref(null);

// 列表数据
const tableData = ref([]);
// 是否展示MCP服务使用
const showUse = ref(false);

/**
 * 移除用户
 * @param {
 *  row: 选中行数据
 *  index: 当前数据下标
 * }
 */
const removeUser = (row) => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: `<p>是否移除该服务?</p>`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await deleteMCP({
        data: { id: row.id }
      });
      Message.success('确认移除');
      getMCPList();
    },
  });
};
// 获取数据
const getMCPList = (reset) => {
  if (reset) {
    pageIndex.value = 1;
  }

  listMCP({
    query: {
      p: pageIndex.value,
      ps: pageSize,
    },
    data: {
    },
  }).then(({ data }) => {
    tableData.value = data.topicList;
    total.value = data.totalElements;
  });
};

// 新增编辑部门
const editRef = ref(null);
const handleMCPEdit = (id = undefined) => {
  editRef.value.initDialog(id);
};
const editSuccess = () => {
  getMCPList();
};

// 删除部门
const depDelete = () => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该部门?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await organDel({
        data: {
          id: selectedOrgan.value.id,
        },
      });
      Message.success('确认删除');
      organRef.value.getOrganList();
      tableData.value = [];
      total.value = 0;
      selectedOrgan.value = {};
    },
  });
};

onMounted(() => {
  getMCPList();
});
</script>

<style lang="scss" scoped></style>
